<template>
	<div class="contact-info-form">
		<a-form ref="formRef" :model="props.modelValue" :rules="formRules" layout="vertical">
			<a-card title="联系方式" class="form-card">
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="手机号码" name="phone">
							<a-input v-model:value="props.modelValue.phone" placeholder="请输入手机号码" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="现住址" name="nowAddress">
							<a-input v-model:value="props.modelValue.nowAddress" placeholder="请输入现住址" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="电子邮箱" name="email">
							<a-input v-model:value="props.modelValue.email" placeholder="请输入电子邮箱" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="紧急联系人关系" name="emergencyRelation">
							<a-select
								v-model:value="props.modelValue.emergencyRelation"
								placeholder="请选择紧急联系人关系"
								allow-clear
							>
								<a-select-option value="父子">父子</a-select-option>
								<a-select-option value="母子">母子</a-select-option>
								<a-select-option value="配偶">配偶</a-select-option>
								<a-select-option value="兄弟姐妹">兄弟姐妹</a-select-option>
								<a-select-option value="朋友">朋友</a-select-option>
								<a-select-option value="其他">其他</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="紧急联系人姓名" name="emergencyContact">
							<a-input v-model:value="props.modelValue.emergencyContact" placeholder="请输入紧急联系人姓名" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="紧急联系人电话" name="emergencyPhone">
							<a-input v-model:value="props.modelValue.emergencyPhone" placeholder="请输入紧急联系人电话" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-card>
		</a-form>
	</div>
</template>

<script setup>
	import { defineProps, ref, watch } from 'vue'
	import { message } from 'ant-design-vue'
	import onboardingRegistryApi from '@/api/hrms/onboarding/registry/onboardingRegistryApi'

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({})
		}
	})

	const formRef = ref()

	// 自定义验证规则 - 紧急联系人信息联动校验
	const validateEmergencyInfo = async (rule, value) => {
		const { emergencyContact, emergencyRelation, emergencyPhone } = props.modelValue

		// 如果三个字段都为空，则通过验证
		if (!emergencyContact && !emergencyRelation && !emergencyPhone) {
			return Promise.resolve()
		}

		// 如果任何一个字段不为空，则三个字段都必须填写
		if (!emergencyContact) {
			return Promise.reject('请输入紧急联系人姓名')
		}
		if (!emergencyRelation) {
			return Promise.reject('请选择紧急联系人关系')
		}
		if (!emergencyPhone) {
			return Promise.reject('请输入紧急联系人电话')
		}

		return Promise.resolve()
	}

	// 表单验证规则
	const formRules = {
		phone: [{ required: true, message: '请输入手机号码' }],
		nowAddress: [{ required: true, message: '请输入现住址' }],
		email: [{ required: false, type: 'email', message: '请输入正确的邮箱格式' }],
		emergencyContact: [{ validator: validateEmergencyInfo }],
		emergencyRelation: [{ validator: validateEmergencyInfo }],
		emergencyPhone: [
			{ validator: validateEmergencyInfo },
			{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' }
		]
	}

	// 监听紧急联系人信息变化，触发联动校验
	watch(
		[
			() => props.modelValue.emergencyContact,
			() => props.modelValue.emergencyRelation,
			() => props.modelValue.emergencyPhone
		],
		() => {
			// 当紧急联系人相关信息发生变化时，重新验证这三个字段
			formRef.value?.validateFields(['emergencyContact'])
			formRef.value?.validateFields(['emergencyRelation'])
			formRef.value?.validateFields(['emergencyPhone'])
		},
		{ deep: true }
	)

	// 暴露保存数据方法给父组件调用
	defineExpose({
		saveData
	})

	// 保存数据方法（供父组件调用）
	async function saveData() {
		try {
			await formRef.value.validateFields()
			const submitData = new FormData()
			submitData.append(
				'onboardingRegistryEditBo',
				new Blob([JSON.stringify({ contactEditBo: props.modelValue })], {
					type: 'application/json'
				})
			)
			await onboardingRegistryApi.updateRegistryInfo(props.modelValue.id, submitData)
			message.success('联系方式保存成功')
			return true
		} catch (error) {
			console.error('表单验证失败:', error)
			message.error('请检查表单填写是否正确')
			return false
		}
	}
</script>

<style scoped>
	.form-card {
		margin-bottom: 16px;
		border-radius: 8px;
	}

	.form-card :deep(.ant-card-head) {
		background-color: #fafafa;
		border-radius: 8px 8px 0 0;
	}
</style>
